<template>
  <m-layout>
    <mt-header slot="header" title="添加试课" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="course">
      <!-- step: 1 -->
      <div v-if="step == 1" >
        <mt-cell v-for='(item, index) in courseFormList' :key='index' @click.native='selectedCourseName(index)'
        :title="item.trainCourseSimpleVO.courseName"  is-link></mt-cell>
      </div>
      <!-- step: 2 -->
      <div v-if="step == 2">
        <mt-cell v-for='(item, index) in schoolList' :key='index' @click.native='selectedSchoolName(index)'
        :title="item.schoolName"  is-link></mt-cell>
      </div>
      <!-- step: 3 -->
      <div v-if="step == 3">
        <mt-cell v-for='(item, index) in classesList' :key='index' @click.native='selectedClassesName(index)'
        :title="item.classesName"  is-link></mt-cell>
      </div>

    </div>
  </m-layout>
</template>

<script>
import saleApi from 'api/sale.js'
import { mapState } from 'vuex'

export default {
  components: {
  },
  computed: {
    ...mapState({
      list: state => state.tactical.list
    })
  },
  data () {
    return {
      from: {
        courseId: '',
        schoolId: '',
        classesId: '',
        studentId: '',
        signupFee: 0,
        timesCourseCode: ''
      },
      courseFormList: [], // 办理报名可选的课程
      schoolList: [],
      classesList: [],
      step: 1
    }
  },
  mounted () {
    this.from.studentId = this.$route.query.student_id
    // 可以添加的试课列表-只有次课的可以试课
    saleApi.getCourseFormList({
      properties: 2 // 0：专业课，1：综合课，2：次课 (目前只有带试课功能的次课，可试课)
    }).then((res) => {
      this.courseFormList = res.data
    })
  },
  methods: {
    submit () {
      saleApi.addStudentToTestClass(this.from).then(() => {
        this.$router.replace({path: `/sale/detail/test-class`, query: {student_id: this.from.studentId}})
      }).catch(() => {})
    },
    // 选择课程
    selectedCourseName (index) {
      this.step = 2
      this.from.courseId = this.courseFormList[index].trainCourseSimpleVO.id
      // 选出其中唯一的体验课
      this.courseFormList[index].trainTimesCourseRespVOS.forEach((item) => {
        if (/^T/.test(item.timesCourseCode)) {
          this.from.timesCourseCode = item.timesCourseCode
        }
      })
      this.schoolList = this.courseFormList[index].simpleVOList
      this.classesList = this.courseFormList[index].trainClassessVOS
    },
    selectedSchoolName (index) {
      this.step = 3
      this.from.schoolId = this.schoolList[index].id
    },
    selectedClassesName (index) {
      this.from.classesId = this.classesList[index].classesId
      this.submit()
    }
  }
}
</script>

<style lang="scss" scoped>
.course{
}
</style>

<style lang="scss" >
.course{
}
</style>
